<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>鸿蒙应用演示</title>
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --primary-color: #0D9FFB;
            --secondary-color: #0A84FF;
            --accent-color: #FF6B6B;
            --text-primary: #333333;
            --text-secondary: #666666;
            --background-light: #F5F5F5;
            --background-dark: #191919;
            --card-background: #FFFFFF;
            --border-color: #E0E0E0;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: var(--background-light);
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            color: var(--text-primary);
            transition: background-color 0.3s ease;
        }
        
        /* 鸿蒙风格容器 */
        .app-container {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        
        /* 顶部导航栏 */
        .nav-bar {
            height: 56px;
            background-color: var(--primary-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            color: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            z-index: 100;
        }
        
        .nav-title {
            font-size: 18px;
            font-weight: bold;
        }
        
        .nav-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        
        /* 主内容区域 */
        .content {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
            transition: transform 0.3s ease, opacity 0.3s ease;
        }
        
        /* 页面隐藏状态 */
        .page {
            position: absolute;
            top: 56px;
            left: 0;
            width: 100%;
            height: calc(100% - 56px);
            opacity: 0;
            transform: translateX(100%);
            transition: transform 0.3s ease, opacity 0.3s ease;
            z-index: 1;
        }
        
        /* 页面显示状态 */
        .page.active {
            opacity: 1;
            transform: translateX(0);
            z-index: 2;
        }
        
        /* 页面退出状态 */
        .page.exit {
            transform: translateX(-100%);
            opacity: 0;
        }
        
        /* 鸿蒙风格卡片 */
        .card {
            background-color: var(--card-background);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        
        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.12);
        }
        
        /* 鸿蒙风格按钮 */
        .button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 24px;
            font-size: 16px;
            font-weight: 500;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 120px;
        }
        
        .button:hover {
            background-color: var(--secondary-color);
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        
        .button:active {
            transform: translateY(0);
        }
        
        .button-outline {
            background-color: transparent;
            border: 2px solid var(--primary-color);
            color: var(--primary-color);
        }
        
        .button-outline:hover {
            background-color: var(--primary-color);
            color: white;
        }
        
        /* 文本样式 */
        h1 {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 16px;
            color: var(--text-primary);
        }
        
        h2 {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 12px;
            color: var(--text-primary);
        }
        
        p {
            font-size: 16px;
            line-height: 1.6;
            color: var(--text-secondary);
            margin-bottom: 12px;
        }
        
        /* 列表样式 */
        .list {
            margin-bottom: 16px;
        }
        
        .list-item {
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
            transition: background-color 0.2s ease;
        }
        
        .list-item:last-child {
            border-bottom: none;
        }
        
        .list-item:hover {
            background-color: rgba(0,0,0,0.02);
        }
        
        .list-icon {
            width: 40px;
            height: 40px;
            background-color: var(--primary-color);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16px;
            color: white;
            font-weight: bold;
            font-size: 18px;
        }
        
        .list-content {
            flex: 1;
        }
        
        .list-title {
            font-weight: 500;
            font-size: 16px;
            color: var(--text-primary);
        }
        
        .list-desc {
            font-size: 14px;
            color: var(--text-secondary);
            margin-top: 4px;
        }
        
        /* 网格布局 */
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 16px;
            margin-bottom: 16px;
        }
        
        .grid-item {
            background-color: var(--card-background);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .grid-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.12);
        }
        
        .grid-icon {
            width: 50px;
            height: 50px;
            background-color: var(--primary-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 12px;
            color: white;
            font-size: 24px;
        }
        
        .grid-title {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate-fade-in {
            animation: fadeIn 0.5s ease forwards;
        }
        
        .delay-100 {
            animation-delay: 0.1s;
        }
        
        .delay-200 {
            animation-delay: 0.2s;
        }
        
        .delay-300 {
            animation-delay: 0.3s;
        }
        
        /* 底部导航栏（仅在首页显示） */
        .bottom-nav {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 56px;
            background-color: var(--card-background);
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            z-index: 100;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--text-secondary);
            transition: color 0.2s ease;
        }
        
        .nav-item.active {
            color: var(--primary-color);
        }
        
        .nav-item-icon {
            font-size: 20px;
            margin-bottom: 4px;
        }
        
        .nav-item-text {
            font-size: 12px;
        }
        
        /* 适配移动设备 */
        @media (max-width: 768px) {
            .grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            h1 {
                font-size: 24px;
            }
            
            h2 {
                font-size: 20px;
            }
        }
        
        /* 深色模式 */
        .dark-mode {
            --text-primary: #FFFFFF;
            --text-secondary: #B0B0B0;
            --background-light: var(--background-dark);
            --card-background: #252525;
            --border-color: #333333;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 顶部导航栏 -->
        <div class="nav-bar">
            <div id="back-nav" class="nav-icon" style="display: none;">
                &larr;
            </div>
            <div class="nav-title" id="nav-title">鸿蒙应用演示</div>
            <div id="theme-toggle" class="nav-icon">
                ☀️
            </div>
        </div>
        
        <!-- 首页 -->
        <div id="home-page" class="page active">
            <div class="content">
                <div class="card animate-fade-in">
                    <h1>Hello World</h1>
                    <p>欢迎使用鸿蒙风格应用演示</p>
                    <button id="next-button" class="button">进入详情</button>
                </div>
                
                <h2 class="animate-fade-in delay-100">功能模块</h2>
                <div class="grid animate-fade-in delay-200">
                    <div class="grid-item" onclick="showPage('detail-page')">
                        <div class="grid-icon">📊</div>
                        <div class="grid-title">数据统计</div>
                    </div>
                    <div class="grid-item" onclick="showPage('settings-page')">
                        <div class="grid-icon">⚙️</div>
                        <div class="grid-title">设置</div>
                    </div>
                    <div class="grid-item" onclick="showPage('about-page')">
                        <div class="grid-icon">ℹ️</div>
                        <div class="grid-title">关于</div>
                    </div>
                    <div class="grid-item" onclick="showPage('contact-page')">
                        <div class="grid-icon">📞</div>
                        <div class="grid-title">联系我们</div>
                    </div>
                </div>
                
                <h2 class="animate-fade-in delay-300">最近活动</h2>
                <div class="list animate-fade-in delay-300">
                    <div class="list-item" onclick="showPage('detail-page')">
                        <div class="list-icon">📅</div>
                        <div class="list-content">
                            <div class="list-title">系统更新</div>
                            <div class="list-desc">新版本 1.0.1 已发布</div>
                        </div>
                    </div>
                    <div class="list-item" onclick="showPage('detail-page')">
                        <div class="list-icon">🔔</div>
                        <div class="list-content">
                            <div class="list-title">通知提醒</div>
                            <div class="list-desc">您有 3 条新消息</div>
                        </div>
                    </div>
                    <div class="list-item" onclick="showPage('detail-page')">
                        <div class="list-icon">🎯</div>
                        <div class="list-content">
                            <div class="list-title">任务完成</div>
                            <div class="list-desc">项目进度已更新</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 底部导航栏 -->
            <div class="bottom-nav">
                <div class="nav-item active" onclick="showPage('home-page')">
                    <div class="nav-item-icon">🏠</div>
                    <div class="nav-item-text">首页</div>
                </div>
                <div class="nav-item" onclick="showPage('detail-page')">
                    <div class="nav-item-icon">📋</div>
                    <div class="nav-item-text">详情</div>
                </div>
                <div class="nav-item" onclick="showPage('settings-page')">
                    <div class="nav-item-icon">⚙️</div>
                    <div class="nav-item-text">设置</div>
                </div>
            </div>
        </div>
        
        <!-- 详情页 -->
        <div id="detail-page" class="page">
            <div class="content">
                <div class="card">
                    <h1>详情页面</h1>
                    <p>这是应用的详情页面，展示了更多鸿蒙风格的UI元素和交互功能。</p>
                    <p>您可以通过顶部的返回按钮回到首页，或者点击底部导航栏切换到其他页面。</p>
                    <div style="margin-top: 20px; display: flex; gap: 12px;">
                        <button class="button" onclick="showToast('操作成功')">确认操作</button>
                        <button class="button button-outline" onclick="showToast('已取消')">取消</button>
                    </div>
                </div>
                
                <div class="card">
                    <h2>数据信息</h2>
                    <p>这里展示了一些示例数据和信息，您可以根据实际需求进行修改和扩展。</p>
                    <div class="list">
                        <div class="list-item">
                            <div class="list-icon">📊</div>
                            <div class="list-content">
                                <div class="list-title">统计数据</div>
                                <div class="list-desc">今日访问：1,234 次</div>
                            </div>
                        </div>
                        <div class="list-item">
                            <div class="list-icon">📈</div>
                            <div class="list-content">
                                <div class="list-title">增长趋势</div>
                                <div class="list-desc">较昨日增长 12.5%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 设置页面 -->
        <div id="settings-page" class="page">
            <div class="content">
                <div class="card">
                    <h1>设置</h1>
                    <div class="list">
                        <div class="list-item">
                            <div class="list-icon">🔤</div>
                            <div class="list-content">
                                <div class="list-title">语言设置</div>
                                <div class="list-desc">简体中文</div>
                            </div>
                        </div>
                        <div class="list-item">
                            <div class="list-icon">🔔</div>
                            <div class="list-content">
                                <div class="list-title">通知管理</div>
                                <div class="list-desc">已开启</div>
                            </div>
                        </div>
                        <div class="list-item">
                            <div class="list-icon">🔒</div>
                            <div class="list-content">
                                <div class="list-title">隐私设置</div>
                                <div class="list-desc">管理隐私权限</div>
                            </div>
                        </div>
                        <div class="list-item">
                            <div class="list-icon">🔄</div>
                            <div class="list-content">
                                <div class="list-title">检查更新</div>
                                <div class="list-desc">当前版本 1.0.0</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 关于页面 -->
        <div id="about-page" class="page">
            <div class="content">
                <div class="card">
                    <h1>关于应用</h1>
                    <p>这是一个基于HarmonyOS设计风格的应用演示，展示了现代化的UI设计和流畅的交互体验。</p>
                    <p>版本：1.0.0</p>
                    <p>开发者：鸿蒙应用团队</p>
                    <p>© 2024 鸿蒙应用演示. 保留所有权利。</p>
                </div>
            </div>
        </div>
        
        <!-- 联系页面 -->
        <div id="contact-page" class="page">
            <div class="content">
                <div class="card">
                    <h1>联系我们</h1>
                    <p>如有任何问题或建议，请通过以下方式联系我们：</p>
                    <div class="list">
                        <div class="list-item">
                            <div class="list-icon">✉️</div>
                            <div class="list-content">
                                <div class="list-title">邮箱</div>
                                <div class="list-desc">support@harmonyos.com</div>
                            </div>
                        </div>
                        <div class="list-item">
                            <div class="list-icon">📞</div>
                            <div class="list-content">
                                <div class="list-title">电话</div>
                                <div class="list-desc">400-123-4567</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Toast提示 -->
        <div id="toast" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0,0,0,0.7); color: white; padding: 12px 20px; border-radius: 8px; font-size: 14px; z-index: 1000; opacity: 0; transition: opacity 0.3s ease;">
        </div>
    </div>

    <script>
        // 全局变量
        let currentPage = 'home-page';
        let darkMode = false;
        
        // 获取DOM元素
        const backNav = document.getElementById('back-nav');
        const navTitle = document.getElementById('nav-title');
        const themeToggle = document.getElementById('theme-toggle');
        const toast = document.getElementById('toast');
        const bottomNav = document.querySelector('.bottom-nav');
        
        // 页面切换函数
        function showPage(pageId) {
            if (currentPage === pageId) return;
            
            const currentPageEl = document.getElementById(currentPage);
            const nextPageEl = document.getElementById(pageId);
            
            if (!nextPageEl) {
                console.error('页面不存在:', pageId);
                return;
            }
            
            // 添加退出动画
            currentPageEl.classList.add('exit');
            
            // 隐藏当前页面，显示下一页
            setTimeout(() => {
                currentPageEl.classList.remove('active', 'exit');
                nextPageEl.classList.add('active');
                
                // 更新当前页面
                currentPage = pageId;
                
                // 更新导航栏
                updateNavBar(pageId);
                
                // 更新底部导航栏选中状态
                updateBottomNav(pageId);
                
                // 添加进入动画
                const animElements = nextPageEl.querySelectorAll('.animate-fade-in');
                animElements.forEach(el => {
                    el.style.animation = 'none';
                    setTimeout(() => {
                        el.style.animation = '';
                    }, 10);
                });
                
            }, 300);
        }
        
        // 更新导航栏
        function updateNavBar(pageId) {
            if (pageId === 'home-page') {
                backNav.style.display = 'none';
                navTitle.textContent = '鸿蒙应用演示';
                bottomNav.style.display = 'flex';
            } else {
                backNav.style.display = 'flex';
                // 设置不同页面的标题
                const titles = {
                    'detail-page': '详情页面',
                    'settings-page': '设置',
                    'about-page': '关于应用',
                    'contact-page': '联系我们'
                };
                navTitle.textContent = titles[pageId] || '详情页面';
                bottomNav.style.display = 'none';
            }
        }
        
        // 更新底部导航栏选中状态
        function updateBottomNav(pageId) {
            const navItems = document.querySelectorAll('.nav-item');
            navItems.forEach(item => {
                item.classList.remove('active');
            });
            
            const activeItem = document.querySelector(`.nav-item[onclick*="${pageId}"]`);
            if (activeItem) {
                activeItem.classList.add('active');
            }
        }
        
        // 显示Toast提示
        function showToast(message) {
            toast.textContent = message;
            toast.style.opacity = '1';
            
            setTimeout(() => {
                toast.style.opacity = '0';
            }, 2000);
        }
        
        // 切换深色/浅色模式
        function toggleTheme() {
            darkMode = !darkMode;
            document.body.classList.toggle('dark-mode', darkMode);
            themeToggle.textContent = darkMode ? '🌙' : '☀️';
            showToast(darkMode ? '已切换到深色模式' : '已切换到浅色模式');
        }
        
        // 绑定事件
        backNav.addEventListener('click', () => {
            showPage('home-page');
        });
        
        themeToggle.addEventListener('click', toggleTheme);
        
        document.getElementById('next-button').addEventListener('click', () => {
            showPage('detail-page');
        });
        
        // 添加手势支持（简单的左右滑动）
        let startX = 0;
        let endX = 0;
        
        document.addEventListener('touchstart', (e) => {
            startX = e.changedTouches[0].screenX;
        });
        
        document.addEventListener('touchend', (e) => {
            endX = e.changedTouches[0].screenX;
            handleSwipe();
        });
        
        function handleSwipe() {
            const diff = endX - startX;
            
            // 向左滑动（显示下一页）
            if (diff < -50 && currentPage === 'home-page') {
                showPage('detail-page');
            }
            // 向右滑动（返回上一页）
            else if (diff > 50 && currentPage !== 'home-page') {
                showPage('home-page');
            }
        }
        
        // 初始化
        console.log('鸿蒙应用演示启动成功！');
        showToast('欢迎使用鸿蒙应用演示');
    </script>
</body>
</html>